import './Scss/ScheduleSchedule.scss'
import dayjs from 'dayjs'
import { DatePicker } from 'antd'
import { Column, Bar } from '@ant-design/plots'
import { Http } from '../../../../Common/Api'
import { useSize, useRequest, useBoolean } from 'ahooks'
import { useState, useEffect, useRef, useCallback } from 'react'
import { CommonSmallTitle, TitleSmallA01 } from '../Common/SmallTitle'

import { LargeScreenTablesModal } from '../../Common/LargeScreen/LargeScreenModal'

import { FrontModalBox } from '../Modal'

const One = ({ TabsActive, Date }) => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)

    const [data, setData] = useState([])
    const [Charts, setCharts] = useState()
    useEffect(() => {
        if (size) {
            const { width, height } = size
            const config = {
                autoFit: false,
                width,
                height,
                maxColumnWidth: 14,
                appendPadding: 24,
                data,
                isStack: true,
                xField: 'type',
                yField: 'value',
                seriesField: 'name',
                color: ['#B2FBFD', '#FAD688'],
                legend: {
                    layout: 'horizontal',
                    position: 'top-right',
                    offsetY: 24,
                    itemName: { style: { fill: '#B2FBFD', fontSize: 12 } },
                },
                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    title: {
                        text: '百分比',
                        position: 'end',
                        autoRotate: false,
                        offset: 50,
                        style: { fill: '#B2FBFD' },
                    },
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' }, formatter: e => e + '%' },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },
            }
            setCharts(config)
        }
    }, [size, data])

    const { runAsync: getGetEngineeringPerByYear } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(({ uuid, tableName, formerYearPer, thisYearPer }) => {
                data = [
                    ...data,
                    { name: '往年完成', type: tableName, value: formerYearPer, uuid },
                    { name: '本年完成', type: tableName, value: thisYearPer, uuid },
                ]
            })
            setData(data)
        },
    })

    const { runAsync: getGetEngineeringPerByYearMonth } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(({ uuid, tableName, formerMonthPer, thisMonthPer }) => {
                data = [
                    ...data,
                    { name: '往月完成', type: tableName, value: formerMonthPer, uuid },
                    { name: '本月完成', type: tableName, value: thisMonthPer, uuid },
                ]
            })
            setData(data)
        },
    })

    const { runAsync: getGetEngineeringPerByYearMonthDay } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(({ uuid, tableName, formerDayPer, thisDayPer }) => {
                data = [
                    ...data,
                    { name: '往日完成', type: tableName, value: formerDayPer, uuid },
                    { name: '本日完成', type: tableName, value: thisDayPer, uuid },
                ]
            })
            setData(data)
        },
    })

    useEffect(() => {
        if (TabsActive === '1')
            getGetEngineeringPerByYear({ url: 'getGetEngineeringPerByYear', data: { OrgType: 'A', StatDate: Date } })
        if (TabsActive === '2')
            getGetEngineeringPerByYearMonth({
                url: 'getGetEngineeringPerByYearMonth',
                data: { OrgType: 'A', StatDate: Date },
            })
        if (TabsActive === '3')
            getGetEngineeringPerByYearMonthDay({
                url: 'getGetEngineeringPerByYearMonthDay',
                data: { OrgType: 'A', StatDate: Date },
            })
    }, [
        Date,
        TabsActive,
        getGetEngineeringPerByYear,
        getGetEngineeringPerByYearMonth,
        getGetEngineeringPerByYearMonthDay,
    ])

    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [Parameter, setParameter] = useState()

    return (
        <CommonSmallTitle className="ItemTitle" title="形象进度A标" flex={1} style={{ marginBottom: 16 }}>
            <div className="Charts" ref={ChartsBox}>
                {Charts && (
                    <Column
                        {...Charts}
                        onReady={plot =>
                            plot.on('plot:click', e => {
                                const { x, y } = e
                                const [{ data }] = plot.chart.getTooltipItems({ x, y })
                                setParameter({
                                    uuid: data.uuid,
                                    type: 'LargeScreeTable',
                                    classification: 'ImageProgressPopulation',
                                })
                                setTrue()
                            })
                        }
                    />
                )}
            </div>
            {TowModal && Parameter && (
                <LargeScreenTablesModal
                    className="ItemTitle"
                    Off={setFalse}
                    title="形象进度统计"
                    parameter={Parameter}
                />
            )}
        </CommonSmallTitle>
    )
}

const Two = ({ TabsActive, Date }) => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)

    const [data, setData] = useState([])
    const [Charts, setCharts] = useState()
    useEffect(() => {
        if (size) {
            const { width, height } = size
            const config = {
                autoFit: false,
                width,
                height,
                maxColumnWidth: 14,
                appendPadding: 24,
                data,
                isStack: true,
                xField: 'type',
                yField: 'value',
                seriesField: 'name',
                color: ['#B2FBFD', '#FAD688'],
                legend: {
                    layout: 'horizontal',
                    position: 'top-right',
                    offsetY: 24,
                    itemName: { style: { fill: '#B2FBFD', fontSize: 12 } },
                },

                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    title: {
                        text: '百分比',
                        position: 'end',
                        autoRotate: false,
                        offset: 50,
                        style: { fill: '#B2FBFD' },
                    },
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' } },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },
            }
            setCharts(config)
        }
    }, [size, data])

    const { runAsync: getGetEngineeringPerByYear } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(({ uuid, tableName, formerYearPer, thisYearPer }) => {
                data = [
                    ...data,
                    { name: '往年完成', type: tableName, value: formerYearPer, uuid },
                    { name: '本年完成', type: tableName, value: thisYearPer, uuid },
                ]
            })
            setData(data)
        },
    })

    const { runAsync: getGetEngineeringPerByYearMonth } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(({ uuid, tableName, formerMonthPer, thisMonthPer }) => {
                data = [
                    ...data,
                    { name: '往月完成', type: tableName, value: formerMonthPer, uuid },
                    { name: '本月完成', type: tableName, value: thisMonthPer, uuid },
                ]
            })
            setData(data)
        },
    })

    const { runAsync: getGetEngineeringPerByYearMonthDay } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(({ uuid, tableName, formerDayPer, thisDayPer }) => {
                data = [
                    ...data,
                    { name: '往日完成', type: tableName, value: formerDayPer, uuid },
                    { name: '本日完成', type: tableName, value: thisDayPer, uuid },
                ]
            })
            setData(data)
        },
    })

    useEffect(() => {
        if (TabsActive === '1')
            getGetEngineeringPerByYear({ url: 'getGetEngineeringPerByYear', data: { OrgType: 'B', StatDate: Date } })
        if (TabsActive === '2')
            getGetEngineeringPerByYearMonth({
                url: 'getGetEngineeringPerByYearMonth',
                data: { OrgType: 'B', StatDate: Date },
            })
        if (TabsActive === '3')
            getGetEngineeringPerByYearMonthDay({
                url: 'getGetEngineeringPerByYearMonthDay',
                data: { OrgType: 'B', StatDate: Date },
            })
    }, [
        Date,
        TabsActive,
        getGetEngineeringPerByYear,
        getGetEngineeringPerByYearMonth,
        getGetEngineeringPerByYearMonthDay,
    ])

    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [Parameter, setParameter] = useState()

    return (
        <CommonSmallTitle className="ItemTitle" title="形象进度B标" flex={1}>
            <div className="Charts" ref={ChartsBox}>
                {Charts && (
                    <Column
                        {...Charts}
                        onReady={plot =>
                            plot.on('plot:click', e => {
                                const { x, y } = e
                                const [{ data }] = plot.chart.getTooltipItems({ x, y })
                                setParameter({
                                    uuid: data.uuid,
                                    type: 'LargeScreeTable',
                                    classification: 'ImageProgressPopulation',
                                })
                                setTrue()
                            })
                        }
                    />
                )}
            </div>
            {TowModal && Parameter && (
                <LargeScreenTablesModal
                    className="ItemTitle"
                    Off={setFalse}
                    title="形象进度统计"
                    parameter={Parameter}
                />
            )}
        </CommonSmallTitle>
    )
}

export const ScheduleSchedule001 = ({ TabsActive, Date }) => {
    return (
        <div className="ScheduleSchedule001">
            <One TabsActive={TabsActive} Date={Date} />
            <Two TabsActive={TabsActive} Date={Date} />
        </div>
    )
}

const Thr = ({ TabsActive, Date, groupId }) => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const APIData = { groupId, StatDate: Date }
    const [data, setData] = useState([])
    const [Charts, setCharts] = useState()
    const [OptionsCall, setOptionsCall] = useState()

    useEffect(() => {
        if (size) {
            const { width, height } = size
            const config = {
                autoFit: false,
                width,
                height,
                maxColumnWidth: 14,
                appendPadding: 24,
                data,
                isStack: true,
                xField: 'type',
                yField: 'value',
                seriesField: 'name',
                color: ['#B2FBFD', '#FAD688'],
                legend: {
                    layout: 'horizontal',
                    position: 'top-right',
                    offsetY: 24,
                    itemName: { style: { fill: '#B2FBFD', fontSize: 12 } },
                },
                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    title: {
                        text: '百分比',
                        position: 'end',
                        autoRotate: false,
                        offset: 50,
                        style: { fill: '#B2FBFD' },
                    },
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' }, formatter: e => e + '%' },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },
            }
            setCharts(config)
        }
    }, [size, data])

    const { runAsync: getGetEngineeringPerByYear } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(({ uuid, tableName, formerYearPer, thisYearPer }) => {
                data = [
                    ...data,
                    { name: '往年完成', type: tableName, value: formerYearPer, uuid },
                    { name: '本年完成', type: tableName, value: thisYearPer, uuid },
                ]
            })
            setData(data)
        },
    })

    const { runAsync: getGetEngineeringPerByYearMonth } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(({ uuid, tableName, formerMonthPer, thisMonthPer }) => {
                data = [
                    ...data,
                    { name: '往月完成', type: tableName, value: formerMonthPer, uuid },
                    { name: '本月完成', type: tableName, value: thisMonthPer, uuid },
                ]
            })
            setData(data)
        },
    })

    const { runAsync: getGetEngineeringPerByYearMonthDay } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(({ uuid, tableName, formerDayPer, thisDayPer }) => {
                data = [
                    ...data,
                    { name: '往日完成', type: tableName, value: formerDayPer, uuid },
                    { name: '本日完成', type: tableName, value: thisDayPer, uuid },
                ]
            })
            setData(data)
        },
    })

    const [TabsActiveList] = useState({
        1: () => getGetEngineeringPerByYear({ url: 'getGetEngineeringPerByYear', data: APIData }),
        2: () => getGetEngineeringPerByYearMonth({ url: 'getGetEngineeringPerByYearMonth', data: APIData }),
        3: () => getGetEngineeringPerByYearMonthDay({ url: 'getGetEngineeringPerByYearMonthDay', data: APIData }),
    })
    useEffect(() => {
        TabsActiveList[TabsActive]()
    }, [TabsActive, TabsActiveList])

    return (
        <div className="Charts" ref={ChartsBox}>
            {Charts && (
                <Column
                    {...Charts}
                    onReady={plot =>
                        plot.on('plot:click', e => {
                            const { x, y } = e
                            const [{ data }] = plot.chart.getTooltipItems({ x, y })
                            setOptionsCall({
                                type: 'TableList',
                                data: {
                                    title: '形象进度统计',
                                    type: 'ImageProgressPopulation',
                                    uuid: data.uuid,
                                },
                            })
                        })
                    }
                />
            )}
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

export const ScheduleSchedule002 = ({ TabsActive, Date, length, title }) => {
    return (
        <div className="ScheduleSchedule002">
            {Array.from({ length }, (_, index) => index).map(item => (
                <Thr key={item} TabsActive={TabsActive} Date={Date} groupId={item + 1} title={title[item]} />
            ))}
        </div>
    )
}

const TopNav = [
    { uuid: 1, label: '总体' },
    { uuid: 2, label: '年度' },
    { uuid: 3, label: '月度' },
]

const ThrType = {
    overall: {
        url: 'getGetEngineeringPerByYear',
        format: 'YYYY',
        picker: 'year',
        text: '年',
        field: { one: 'formerYearPer', two: 'thisYearPer' },
    },
    year: {
        url: 'getGetEngineeringPerByYearMonth',
        format: 'YYYY-MM',
        picker: 'month',
        text: '月',
        field: { one: 'formerMonthPer', two: 'thisMonthPer' },
    },
    month: {
        url: 'getGetEngineeringPerByYearMonthDay',
        format: 'YYYY-MM-DD',
        picker: '',
        text: '日',
        field: { one: 'formerDayPer', two: 'thisDayPer' },
    },
}

export const ScheduleSchedule003 = ({ type }) => {
    const { url, format, picker, text, field } = ThrType[type]
    const ChartsBox = useRef()
    const Size = useSize(ChartsBox)
    const [Date, setDate] = useState(dayjs().format(format))
    const [Data, setData] = useState()
    const [OptionsCall, setOptionsCall] = useState()
    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { list } = res
            let data = []
            list.forEach(({ uuid, tableName, ...item }) => {
                data = [
                    ...data,
                    { name: `往${text}完成`, type: tableName, value: item[field.one], uuid },
                    { name: `本${text}完成`, type: tableName, value: item[field.two], uuid },
                ]
            })
            setData(data)
        },
    })

    const getData = useCallback(() => {
        runAsync({ url, data: { groupId: 1, StatDate: Date } })
    }, [Date, runAsync, url])
    useEffect(() => getData(), [getData])
    const Config = (data, size) => {
        const { width, height } = size

        return {
            data,
            autoFit: false,
            width,
            height,
            maxBarWidth: 16,
            minBarWidth: 16,
            isStack: true,
            xField: 'value',
            yField: 'type',
            seriesField: 'name',
            color: ['#B2FBFD', '#FAD688'],
            legend: {
                layout: 'horizontal',
                position: 'top-right',
                offsetY: 0,
                itemName: { style: { fill: '#B2FBFD', fontSize: 12 } },
            },

            xAxis: {
                title: {
                    text: '百分比',
                    position: 'end',
                    autoRotate: false,
                    offset: 50,
                    style: { fill: '#B2FBFD' },
                },
                tickCount: 5,
                label: { style: { fill: '#B2FBFD' }, formatter: e => e + '%' },
                grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
            },
            yAxis: {
                label: { style: { fill: '#B2FBFD' } },
                line: { style: { stroke: '#B2FBFD' } },
                tickLine: { style: { stroke: '#B2FBFD' } },
            },
        }
    }

    return (
        <div className="ScheduleSchedule003">
            <DatePicker
                allowClear={false}
                suffixIcon={null}
                value={dayjs(Date)}
                style={{ width: '100%', marginBottom: 8 }}
                onChange={e => setDate(dayjs(e).format(format))}
                picker={picker}
            />
            <div className="Charts" ref={ChartsBox}>
                {Data && Size && (
                    <Bar
                        {...Config(Data, Size)}
                        onReady={plot =>
                            plot.on('plot:click', e => {
                                const { x, y } = e
                                const [{ data }] = plot.chart.getTooltipItems({ x, y })
                                setOptionsCall({
                                    type: 'TableList',
                                    data: {
                                        title: '形象进度统计',
                                        type: 'ImageProgressPopulation',
                                        uuid: data.uuid,
                                    },
                                })
                            })
                        }
                    />
                )}
            </div>
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

export const ScheduleScheduleA01 = ({ title }) => {
    const [active, setActive] = useState(1)
    const [Date, setData] = useState(dayjs().format('YYYY-MM-DD'))
    return (
        <div className="ScheduleScheduleA01">
            <div className="Title">
                {TopNav.map(({ uuid, label }) => (
                    <div key={uuid} className={uuid === active ? 'active' : ''} onClick={() => setActive(uuid)}>
                        {label}
                    </div>
                ))}
            </div>
            <div className="Charts">
                <DatePicker
                    allowClear={false}
                    suffixIcon={null}
                    value={dayjs(Date)}
                    onChange={e => setData(dayjs(e).format('YYYY-MM-DD'))}
                    picker={active === 1 ? 'year' : active === 2 ? 'month' : ''}
                />
                {title.map((item, index) => (
                    <CommonSmallTitle key={item} className="ItemTitle" title={item} flex={1}>
                        <Thr TabsActive={active} Date={Date} groupId={index + 1} />
                    </CommonSmallTitle>
                ))}
            </div>
        </div>
    )
}

const Fou = ({ TabsActive, Date }) => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const Year = dayjs(Date).format('YYYY')
    const Quarter = `Q${dayjs(Date).quarter()}`
    const [data, setData] = useState([])
    const [Charts, setCharts] = useState()
    const [OptionsCall, setOptionsCall] = useState()

    useEffect(() => {
        if (size) {
            const { width, height } = size
            const config = {
                autoFit: false,
                width,
                height,
                maxColumnWidth: 14,
                appendPadding: 24,
                data,
                isGroup: true,
                xField: 'type',
                yField: 'value',
                seriesField: 'name',
                color: ['#B2FBFD', '#FAD688'],
                legend: {
                    layout: 'horizontal',
                    position: 'top-right',
                    offsetY: 24,
                    itemName: { style: { fill: '#B2FBFD', fontSize: 12 } },
                },
                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    title: { text: '万元', position: 'end', autoRotate: false, offset: 50, style: { fill: '#B2FBFD' } },
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' } },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },
                scrollbar: {
                    type: 'horizontal',
                    categorySize: 200,
                    style: {
                        thumbColor: 'rgba(0, 60, 200, 0.4)',
                        trackColor: 'rgba(0, 0, 0, 0.4)',
                        thumbHighlightColor: 'rgba(0, 60, 200, 1)',
                    },
                },
            }
            setCharts(config)
        }
    }, [size, data])

    const { runAsync: getInvestPlanTotal } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(({ uuid, investListName, amount, planAmount }) => {
                data = [
                    ...data,
                    { name: '计划金额', type: investListName, value: Number(planAmount), uuid },
                    { name: '实际金额', type: investListName, value: Number(amount), uuid },
                ]
            })
            setData(data)
        },
    })

    const { runAsync: getInvestPlanYear } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(({ uuid, investListName, amount, planAmount }) => {
                data = [
                    ...data,
                    { name: '计划金额', type: investListName, value: Number(planAmount), uuid },
                    { name: '实际金额', type: investListName, value: Number(amount), uuid },
                ]
            })
            setData(data)
        },
    })

    const { runAsync: getInvestPlanQuarter } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(({ uuid, investListName, amount, planAmount }) => {
                data = [
                    ...data,
                    { name: '计划金额', type: investListName, value: Number(planAmount), uuid },
                    { name: '实际金额', type: investListName, value: Number(amount), uuid },
                ]
            })
            setData(data)
        },
    })

    const [TabsActiveList] = useState({
        1: () => getInvestPlanTotal({ url: 'getInvestPlanTotal' }),
        2: () => getInvestPlanYear({ url: 'getInvestPlanYear', data: { Year } }),
        3: () => getInvestPlanQuarter({ url: 'getInvestPlanQuarter', data: { Year, Quarter } }),
    })
    useEffect(() => {
        TabsActiveList[TabsActive]()
    }, [TabsActive, TabsActiveList])

    return (
        <div className="Charts" ref={ChartsBox}>
            {Charts && (
                <Column
                    {...Charts}
                    onReady={plot =>
                        plot.on('plot:click', e => {
                            const { x, y } = e
                            const [{ data }] = plot.chart.getTooltipItems({ x, y })
                            // setOptionsCall({
                            //     type: 'TableList',
                            //     data: {
                            //         title: '形象进度统计',
                            //         type: 'ImageProgressPopulation',
                            //         uuid: data.uuid,
                            //     },
                            // })
                        })
                    }
                />
            )}
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

const TopNavA01 = [
    { uuid: 1, label: '总体' },
    { uuid: 2, label: '年度' },
    { uuid: 3, label: '季度' },
]

export const ScheduleScheduleA02 = ({ title }) => {
    const [active, setActive] = useState(1)
    const [Time, setData] = useState()

    return (
        <div className="ScheduleScheduleA01">
            <div className="Title">
                {TopNavA01.map(({ uuid, label }) => (
                    <div key={uuid} className={uuid === active ? 'active' : ''} onClick={() => setActive(uuid)}>
                        {label}
                    </div>
                ))}
            </div>
            <div className="Charts">
                {active !== 1 && (
                    <DatePicker
                        allowClear={false}
                        suffixIcon={null}
                        value={dayjs(Time)}
                        onChange={e => setData(dayjs(e).format('YYYY-MM-DD'))}
                        picker={active === 2 ? 'year' : 'quarter'}
                    />
                )}
                {title.map(item => (
                    <div className="Item" key={item}>
                        <TitleSmallA01 title={item} />
                        <Fou key={new Date()} TabsActive={active} Date={Time} title={item} />
                    </div>
                ))}
            </div>
        </div>
    )
}
